<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/css/element.css">
</head>
<body>
<div id="app">
    <#include "/include/daohang.html">
    <el-container>
        <el-header>
            <div style="padding: 10px;height: 50px">
                <div align="center" style="padding-top: 10px">
                    <el-tag style="font-size: 30px">${channel_name}</el-tag>
                </div>
            </div>
        </el-header>
        <el-container>
            <el-aside width="20%">
                <@hotchannellist>
                <div style="padding-left: 20px">
                    <div class="el-transfer-panel"  targetorder="original" style="width: 80%;height: 600px">
                        <p class="el-transfer-panel__header">热门栏目</p>
                        <div class="el-transfer-panel__body">
                            <div role="group" aria-label="checkbox-group" class="el-checkbox-group el-transfer-panel__list" style="height: 600px">
                                <#list results.records as item>
                                    <label class="el-checkbox el-transfer-panel__item">
                                        <span class="el-checkbox__input">
                                            <span class="el-icon-s-promotion"></span>
                                        </span>
                                            <span class="el-checkbox__label">
                                            <span @click="channel('${item.channelpath}')">${item.channelname}</span>
                                        </span>
                                    </label>
                                </#list>
                            </div>
                        </div>
                    </div>
                </div>
                </@hotchannellist>
            </el-aside>
            <el-main>
                <div style="padding-right: 20%">
                    <template>
                        <el-table
                                :data="tableList"
                                stripe
                                @row-click="row_click"
                                @selection-change="handleSelectionChange"
                                style="width: 100%;min-height: 500px">
                            <el-table-column
                                    type="selection"
                                    width="55">
                            </el-table-column>
                            <el-table-column
                                    prop="title"
                                    :show-overflow-tooltip="true"
                                    label="标题"
                                    width="250">
                            </el-table-column>
                            <el-table-column
                                    prop="tag"
                                    width="200"
                                    label="标签">
                            </el-table-column>
                            <el-table-column
                                    prop="mChannel.channelname"
                                    width="200"
                                    label="所属栏目">
                            </el-table-column>
                            <el-table-column
                                    prop="createTime"
                                    width="200"
                                    label="创建时间">
                            </el-table-column>
                        </el-table>
                    </template>

                    <el-divider></el-divider>

                    <el-pagination
                            background
                            @current-change="handleCurrentChange"
                            :page-sizes="[10,50,100,150,200,250,300]"
                            :page-size="size"
                            layout="total,sizes,prev, pager, next,jumper"
                            :total="total">
                    </el-pagination>
                </div>

            </el-main>
        </el-container>
    </el-container>

</div>
<#include "/include/commonjs.html">
<script>
    var Main = {
        extends: global,
        data() {
            return {
                channelpath:'${channel_path}',
                share_drawer:false,//抽屉
                dialogFormVisible_add:false, //添加面板
                dialogFormVisible_update:false, //编辑面板
                activeIndex2: '3', //导航默认选中
                searchform:{

                },
                tableList:[], //表格数据
                total:0, // 条数
                size:10,
                multipleSelection:[], //多选,
                pageNum:1
            }
        },
        created(){
            this.getlist(this.pageNum)
        },
        methods: {
            channel(path){
              location.href="/channeltitle?channelPath="+path;
            },
            row_click(row, column, event){
                window.open(row.contentUrl);
            },
            //分页点击
            handleCurrentChange(val){
                this.pageNum=val;
                this.getlist(this.pageNum);
            },
            getlist(val){
                this.searchform.channelpath=this.channelpath;
                this.searchform.page=val;
                this.searchform.size=this.size;
                api.GET('/no/note/page',this.searchform,(res)=>{
                    if(res.code===0){
                        this.tableList=res.data.records;
                        this.total=res.data.total;
                    }
                })
            },
            //多选
            handleSelectionChange(val){
                this.multipleSelection = val;
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
            },
        }
    }
    var Ctor = Vue.extend(Main)
    new Ctor().$mount('#app')

    function keyDown() {
        var keycode = event.keyCode;
        var realkey = String.fromCharCode(event.keyCode);
        if(keycode==13){
            $("#search-btn").click();
        }
        // alert("按键码: " + keycode + " 字符: "+ realkey);

    }
    document.onkeydown = keyDown;
</script>
</body>
</html>